<template>
  <div class="list_box">
  <div class="list" v-for="item in detail">
    <div class="left_box">
      <img :src="item.img" alt="">
    </div>
    <div class="right_box">
      <p>{{item.title}}</p>
      <p>{{item.nr}}</p>
    </div>
  </div>
  </div>
</template>

<script>
  var json=require("../../data.json")
  export default {
    data () {
      return {
        detail:[1,2,3]
      }
    },
    created:function(){
      this.getmsg()
    },
    watch: {
      '$route' (to, from) {
        //刷新参数放到这里里面去触发就可以刷新相同界面了
        this.getmsg()
      }
    },
    methods:{
        getmsg:function(){
          var path=this.$route.path.replace("/","")
          var sport_msg=json.data[path].wz
           this.detail=sport_msg
        }
    }

  }
</script>

<style>
  .list_box{
    margin-bottom: 55px;
  }
  .list{
    width: 100%;
    height: 90px;
    padding: 5px;
    margin-top: 5px;
    border-bottom: 1px solid #ccc;
  }
  .left_box{
    width: 20%;
    height: 78px;
    /*background-color: yellow;*/
    float: left;
    padding: 5px;
  }
  .left_box img{
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .right_box{
    float: left;
    padding: 5px;
    width: 80%;
    height: 80px;
    /*background-color: palegoldenrod;*/

  }
  .right_box p:first-child{
    font-size: 14px;
    color: black;
  }
  .right_box p{
    text-align: left;
    height: 40px;
    width: 100%;
    line-height: 40px;
    color: #929292;
    font-size: 12px;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>
